import * as PIXI from 'pixi.js'
import { createSprite } from '@renderer/utils/bundle'
import { diyTypeClick } from '@renderer/utils/events'
import { setPixi, setPixiData } from '@renderer/store/modules/usePixiStore'
import useDiyStore from '@renderer/store/modules/useDiyStore'
import { TYPE } from '@renderer/config'
import param, { leftHeightUsage, leftWidthUsage, setTypeKey } from '../param'

export default async (): Promise<PIXI.Container<PIXI.ContainerChild>> => {
  const diyStore = useDiyStore()
  const typeContainer = new PIXI.Container()
  await Promise.all(
    Object.entries(TYPE).map(async ([key, value], index) => {
      const container = new PIXI.Container()
      const unselection = await createSprite('unselectionType')
      const selection = await createSprite('selectionType')
      container.addChild(unselection)
      container.addChild(selection)
      selection.visible = diyStore.creationData.type === key
      const text = new PIXI.Text({
        text: key,
        style: {
          fontFamily: 'XQFont',
          fontSize: param.value.fontSize,
          fill: param.value.fill,
          align: 'center',
        },
      })
      text.anchor.set(0.5)
      text.position.set(container.width / 2 + 20, container.height / 2 - 3)
      container.addChild(text)
      container.position.set(index * container.width * 1.1, 0)
      setPixi(container.uid, container)
      setPixiData(container.uid, {
        key,
        value,
      })
      setTypeKey(key, container)
      diyTypeClick.whiteAdd(container)
      typeContainer.addChild(container)
    }),
  )
  typeContainer.position.set(0, param.value.startHeight + param.value.leftUsageHeight)
  leftWidthUsage(typeContainer)
  leftHeightUsage(typeContainer)
  return typeContainer
}
